<template>
    <div class="page">
        <el-input v-model="sql" :rows="5" type="textarea" placeholder="请输入" />
        <el-button type="primary" @click="doquery">查询</el-button>
        <div class="result">{{ rst }}</div>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';


const sql = ref('')
const rst = ref('')

const doquery = () => {
    if(!sql.value){
        ElMessage.info('请输入查询语句')
    }
    let data = {}
    data.expr = sql.value
    fetch(`${location.origin}/dev-api/core/sql/exec `, {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(data)
    }).then((response) => response.json()).then(res => {
        if (res.code == 0) {
            rst.value = JSON.stringify(res.data)
        } else {
        }

    }).catch(e => {
        alert('查询失败')
    })
}

</script>
<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 10px;
}

.result {
    height: 500px;
    overflow: auto;
    border: 1px solid #eee;
    background-color: white;
    border-radius: 4px;
}
</style>